<template>
	<div class="swipe">
		<van-swipe :autoplay="5000" width="750px" indicator-color="#F70114">
			<van-swipe-item v-for="(image, index) in images" :key="index" v-if="image">
				<img v-lazy="image" alt=""/>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
export default {
	name: 'BannerSwipe',
	components: {
		'van-swipe': Swipe,
		'van-swipe-item': SwipeItem
	},
	props: {
		images: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {

		}
	},
	created() {

	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.swipe {
	width: 100%;
	/deep/.van-swipe {
		background: $color-white;
		.van-swipe-item {
			color: #fff;
			font-size: 20px;
			width: 750px;
			height: 750px!important;
			@include flexBox(center, center);
			img {
				max-width: 100%;
				max-height: 100%;
				display: block;
			}
		}
	}
}
</style>
